send route can take a parameter

6 files changed, 65 insertions, 38 deletions

diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index 48039c7b..27553192 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -36,43 +36,54 @@
 	let followed = false;
 </script>
 
-<div class="flex xl:block justify-center items-center my-20 px-3">
-	<div class="space-y-10 xl:space-y-0">
-		<div class="xl:ml-[calc(15vw-64px)] space-y-2 w-full md:w-72">
-			<h1 class="text-3xl font-bold">{subject.username}</h1>
+<div class="container px-4 flex flex-wrap">
+	<div class="p-10 pt-20 w-full lg:w-1/3">
+		<h1 class="text-3xl font-bold">{subject.username}</h1>
 
-			<p class="text-secondary">
-				{subject.address && subject.address !== 'null' ? subject.address : ''}
-			</p>
+		<p class="text-secondary">
+			{subject.address && subject.address !== 'null' ? subject.address : ''}
+		</p>
 
-			<!-- TODO
-        we need to hook this up
-        <button
-					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
-					on:click={() => (followed = !followed)}
-					><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
-					{$t('user.' + (followed ? 'remove' : 'follow'))}
-				</button>
-        -->
-		</div>
+		<!-- TODO
+      we need to hook this up
+      <button
+      class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
+      on:click={() => (followed = !followed)}
+      ><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
+      {$t('user.' + (followed ? 'remove' : 'follow'))}
+      </button>
+    -->
+	</div>
 
-		<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
-			<div
-				on:click={() => copy(lightningAddress)}
-				id="qr"
-				class="cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
-			/>
+	<div class="space-y-5 lg:mt-20 mx-auto">
+		<div class="flex justify-center gap-2">
+      <a href={`/${subject.username}`}>
+				<button
+					class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2 bg-black text-white"
+					>Lightning</button
+				>
+			</a>
+			<a href={`/${subject.username}/bitcoin`}>
+				<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+					>Bitcoin</button
+				>
+			</a>
+		</div>
+		<div
+			on:click={() => copy(lightningAddress)}
+			id="qr"
+			class="cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
+		/>
 
-			<p class="text-secondary text-xl text-center font-semibold">{$t('user.scanToPayBTC')}</p>
+		<p class="text-secondary text-xl text-center font-semibold">{$t('user.scanToPayBTC')}</p>
 
-			<div
-				class="bg-primary font-semibold rounded-xl text-sm p-3 flex flex-wrap justify-between items-center"
-			>
-				<span>{lightningAddress}</span>
-				<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
-					<Icon icon="copy" style="ml-2" />
-				</button>
-			</div>
+		<div
+			class="bg-primary font-semibold rounded-xl text-sm p-3 flex flex-wrap justify-between items-center"
+		>
+			<span>{lightningAddress}</span>
+			<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
+				<Icon icon="copy" style="ml-2" />
+			</button>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/[username]/bitcoin/+page.server.js b/src/routes/[username]/bitcoin/+page.server.js
new file mode 100644
index 00000000..7ef65346
--- /dev/null
+++ b/src/routes/[username]/bitcoin/+page.server.js
@@ -0,0 +1,4 @@
+import { redirect } from '@sveltejs/kit';
+export async function load({ params }) {
+	throw redirect(303, `/${params.username}`);
+}
diff --git a/src/routes/[username]/bitcoin/+page.svelte b/src/routes/[username]/bitcoin/+page.svelte
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/src/routes/[username]/bitcoin/+page.svelte
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index b031cb93..9759b3d8 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -10,7 +10,7 @@
 	import { avatarUpload, bannerUpload } from '$lib/store';
 	import { upload } from '$lib/upload';
 
-	export let data, form;
+  export let data;
 
 	let { user, rates, token } = data;
 	$: update(data);
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index b6636129..7c667815 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -180,17 +180,20 @@
 			src={banner}
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
+      alt="Banner"
 		/>
 	{:else if user.banner}
 		<img
 			src={`/api/public/${user.username}-banner.png`}
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
+      alt="Banner"
 		/>
 	{:else}
 		<div
 			class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer hover:opacity-80"
 			on:click={() => select('banner')}
+      alt="Banner"
 		/>
 	{/if}
 
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
index 5e03cc57..d694c760 100644
--- a/src/routes/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -1,17 +1,23 @@
 <script>
+  import { onMount } from "svelte";
+	import { formatDistance, parseISO } from 'date-fns';
 	import { newPayment } from '$lib/store';
 	import { t } from '$lib/translations';
 	import { f, s, sats } from '$lib/utils';
+  import { page } from "$app/stores";
+
 	export let data;
 
 	let { user } = data;
 
-	$newPayment = false;
-	let page,
+	let p,
 		total,
 		transactions = [],
 		pages = [];
-	$: data && ({ page, pages, total, transactions } = data);
+	$: data && ({ page: p, pages, total, transactions } = data);
+
+  $: $page && ($newPayment = false);
+  $: $newPayment && invalidate(`/users/${user.username}`);
 </script>
 
 <div class="mt-24 mb-20">
@@ -26,7 +32,7 @@
 					<a
 						class="mr-1 last:mr-0"
 						href={`/${user.username}/transactions/${i + 1}`}
-						class:active={page === i + 1}
+						class:active={p === i + 1}
 					>
 						<div class="border py-2 rounded-full border-2 w-12 h-12 hover:opacity-80 text-center">
 							{i + 1}
@@ -64,7 +70,10 @@
 						</div>
 
 						<div class="text-secondary text-right">
-							{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
+							{formatDistance(parseISO(tx.createdAt), new Date(), {
+								includeSeconds: true,
+								addSuffix: true
+							})}
 						</div>
 					</div>
 				{/each}